<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            text-align: center;
        }
    </style>
</head>
<body>
    
</body>
<script>
     var arr = [
        {student_id:1,student_name:"张三",student_age:18,student_hobby:["唱歌","打篮球","画画"]},
        {student_id:2,student_name:"李四",student_age:19,student_hobby:["游泳","羽毛球","写字"]},
        {student_id:3,student_name:"王五",student_age:20,student_hobby:["唱歌","读书","乒乓球"]}
    ];
    var arr1 = arr.sort();
    for(i=0;i<3;i++){
        var arr2=arr[i];
        var str = arr2.student_hobby.join(",");
        console.log(str);
        }
var borderWidth = 1;
var tableWidth = 400;
var tableHeight = 400;
var i=0;
document.write("<table border='"+borderWidth+"' height='"+tableHeight+"' width='"+tableWidth+"'>");
function creatList(){
    for(var i=0;i<3;i++){
        if(i==0){
            document.write("<tr>");
            document.write("<th>"+"学号"+"</th>");
            document.write("<th>"+"姓名"+"</th>");
            document.write("<th>"+"年龄"+"</th>");
            document.write("<th>"+"爱好"+"</th>");
            document.write("<th>"+"操作"+"</th>");
            document.write("</tr>");
            
        }else{
            document.write("<tr>");
        }
            for(var j=0;j<5;j++){
                document.write("<td>");
                    if(j==0){
                        document.write(arr[i].student_id);
                    }else if(j==1){
                        document.write(arr[i].student_name);
                    }else if(j==2){
                        document.write(arr[i].student_age);
                    }else if(j==3){
                        document.write(arr[i].student_hobby);
                    }else{
                        document.write("<a href='#'>删除</a>");
                    }
                document.write("</td>");
            }
            document.write("</tr>");
    }
}
creatList(arr);
document.write("</table");

</script>
</html>